<template>
  <a-drawer
    :title="title"
    placement="right"
    :closable="true"
    :width="width"
    :visible="visible"
    @close="handleCancel"
    destroyOnClose
  >
    <div>
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="客户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customerName">
              <a-input v-model="model.customerName" :disabled="true"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="收款时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="makeCollectionsTime">
              <j-date placeholder="请选择收款时间"  v-model="model.makeCollectionsTime" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="实收金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="netReceiptsMoney">
              <a-input v-model="model.netReceiptsMoney" :disabled="true"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="银行账户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bankAccountId">
              <a-select
                show-search
                :allowClear="true"
                placeholder="请选择银行账户"
                option-filter-prop="children"
                v-model="model.bankAccountId"
                style="width: 100%"
                :filter-option="filterOptionBankAccount">
                <a-select-option :value="item.id" v-for="(item,index) in accountData" :key="index">
                  {{item.accountName}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="结算单编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="balanceAccountsOrderNo">
              <a-input v-model="model.balanceAccountsOrderNo" :defaultValue="model.balanceAccountsNo" :disabled="true"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="应收金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="makeCollectionsMoney">
              <a-input v-model="model.makeCollectionsMoney" :defaultValue="model.toBeCollectedMoney"  :disabled="true"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="应收余额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="receivableSurplus">
              <a-input v-model="model.receivableSurplus" :defaultValue="model.toBeCollectedMoney" :disabled="true"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="本次收款" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="thisTimeMoney">
              <a-input v-model="model.thisTimeMoney" @change="changeMoney(model.thisTimeMoney)"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="本次核销" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="thisTimeVerification">
              <a-input v-model="model.thisTimeVerification"  :disabled="true"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-textarea v-model="model.remark" placeholder="请输入备注" :rows="4" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-button type="primary" style="width: 100%" @click="submitSave(1)">保存草稿</a-button>
          </a-col>
          <a-col :span="12">
            <a-button type="primary" style="width: 100%" :landing="landing" @click="submitSave(2)">保存并审批</a-button>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
  </a-drawer>

  <!--<j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :footer="null"
    switchFullscreen
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">

  </j-modal>-->
</template>
<script>
  import { httpAction, getAction } from '@/api/manage'
  import '@/assets/less/TableExpand.less'
  export default {
    name: 'addMakeCollectionsModal',
    components: {},
    data() {
      return {
        accountData:[],
        title: '',
        landing: false,
        width: '100%',
        visible: false,
        disableSubmit: false,
        fullscreen: true,
        keyIndex: 0,
        model: {},
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        validatorRules: {
          makeCollectionsTime: [{ required: true, message: '收款时间不能为空' }],
          bankAccountId: [{ required: true, message: '请选择银行账户' }],
          remark: [
            { required: true, message: '备注不能为空' },
            { max: 100, message: '最多输入100个字符' },
          ],
        },
        confirmLoading: false,
        url: {
          add: "/ghProjectMakeCollectionsOrder/add",
          edit: "/ghProjectMakeCollectionsOrder/edit",
          queryById: "/ghSupplychainPurchaseOrder/queryById",
          querySupplierList: "/ghSupplychainSupplier/allList",
          queryDepositoryList: "/ghSupplychainDepository/allList",
          queryMaterialList: "/ghSupplychainMaterial/allList",
          queryPurchaseOrderItemList: "/ghSupplychainPurchaseOrderItem/list",
          deleteOrderItem: "/ghSupplychainPurchaseOrderItem/delete",
          queryUserList: "/sys/user/allList",
          queryAccountDataList: "/ghFinanceAccount/queryAllAccountList",
        }
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      },
    },
    created() {
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      changeMoney(value){
        this.model.thisTimeVerification = value;
        this.model.netReceiptsMoney = value;
        let result = 0;
        if (!this.model.id) {
          result = this.model.toBeCollectedMoney - value;
        } else {
          result = this.model.makeCollectionsMoney - value;
        }

        if (result < 0){
          this.model.receivableSurplus = 0;
        } else {
          this.model.receivableSurplus = result;
        }
      },
      add(record) {
        this.visible = true;
        this.model = Object.assign({}, record);
        this.model.balanceAccountsOrderNo = record.balanceAccountsNo;
        this.model.makeCollectionsMoney = record.toBeCollectedMoney;
        //this.model.thisTimeMoney = record.toBeCollectedMoney;
        delete this.model.id;
        this.initAccountData();
      },
      edit(record){
        this.visible = true;
        this.model = Object.assign({}, record);
        this.model.balanceAccountsOrderNo = record.balanceAccountsOrderNo;
        this.model.makeCollectionsMoney = record.makeCollectionsMoney;
        //this.model.thisTimeMoney = record.netReceiptsMoney;
        this.initAccountData();
      },
      filterOptionBankAccount(input, option){
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      initAccountData(){
        getAction(this.url.queryAccountDataList).then(res=>{
          if (res.success){
            this.accountData = res.result;
          }
        })
      },
      //提交审批，保存草稿
      submitSave(status){
        let httpurl = '';
        let method = '';
        this.landing = true;
        this.$refs.form.validate(valid => {
          if (valid) {
            if (this.model.thisTimeMoney == null || this.model.thisTimeMoney == 0){
              this.landing = false;
              this.$message.error("请输入本次收款金额")
              return;
            } else {
              if (this.model.thisTimeMoney > this.model.makeCollectionsMoney){
                this.landing = false;
                this.$message.error("核销金额不能大于待收款金额")
                return;
              }
            }
            if (!this.model.id) {
              httpurl += this.url.add;
              method = 'post';
            } else {
              httpurl += this.url.edit;
              method = 'put';
            }
            this.model.status = status;
            httpAction(httpurl, this.model, method).then((res) => {
              if (res.success) {
                this.$message.success(res.message);
                this.$emit('ok');
              } else {
                this.$message.warning(res.message);
              }
            }).finally(() => {
              this.close();
              this.landing = false;
            })
          }
        })
      },
      close() {
        this.$emit('close');
        this.visible = false;
        this.model = {};
      },
      handleCancel() {
        this.close()
      },
    }
  }
</script>
<style scoped>
  .editable-row-operations a {
    margin-right: 8px;
  }
  .tableHiddle {
    display: none;
  }
</style>